<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css选择器</title>
		<style>
			/*
			 * 派生选择器：根据html文档的结构层次关系，使用多种选择器以及一些操作符混合进行选择操作；
			 * 
			 */
			
			/*#name span{
				color: red;
			}*/
			
			/*
			 * 相邻选择器
			 */
			#tr1 + tr td{
				color: blue;
			}
			
			td[id="name"] span{
				color: blueviolet;
			}
			
			table > tr{
				color: yellow;
			}
			
		</style>
	</head>

	<body>
		<form method="get" action="#">
			<table>
				<tr id="tr1">
					<td id="name"><span>姓名：</span></td>
					<td>
						<input type="text" id="txtName" name="txtName" />
					</td>
				</tr>
				<tr>
					<td><span>密码：</span></td>
					<td>
						<input type="password" id="txtPsw" name="txtPsw" />
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<!---单选框：要求一组的单选框控件的name属性要一样，才具有互斥效果--->
						<input type="radio" id="radioSex" name="radioSex" value="female" />女
						<input type="radio" id="radioSex2" name="radioSex" value="male" />男
					</td>
				</tr>
				<tr>
					<td>兴趣：</td>
					<td>
						<!---多选框：要求一组的多选框控件的name属性要一样--->
						<input type="checkbox" id="chHobby" name="chHobby" value="游戏" />游戏
						<input type="checkbox" id="chHobby2" name="chHobby" value="手机游戏" />手机游戏
						<input type="checkbox" id="chHobby3" name="chHobby" value="街机游戏"/>街机游戏
					</td>
				</tr>
				<tr>
					<td>头像：</td>
					<td>
						<input type="hidden" id="hidden1" name="hidden1" value="隐藏控件" />
						<!---多选框：要求一组的多选框控件的name属性要一样--->
						<input type="file" id="file1" name="file1" />
					</td>
				</tr>
				<tr>
					<td>学历：</td>
					<td>
						<select id="select1" name="select1">
							<option></option>
							<option value="博士">博士学历</option>
							<option value="硕士">研究生学历</option>
							<option value="学士">本科学历</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>自我介绍：</td>
					<td>
						<textarea id="txta1" name="txta1" cols="80" rows="5">请输入个人简介：</textarea>
						
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="button" id="button1" name="button1" value="button" />
						<input type="submit" id="submit1" name="submit1" value="submit" />
						<input type="reset" id="reset" name="reset1" value="reset" />
						
						<button id="button2" name="button2" value="button2">button2</button>
					</td>
				</tr>
			</table>
		</form>
	</body>

</html>